<template>
    <!-- <Chart /> -->
  <div class="home-container">
    <div class="title-section">
      <h1 class="title">
        <el-icon class="title-icon"><MagicStick /></el-icon>
        智能出题系统
      </h1>
    </div>
    <el-row class="steps-row">
      <el-col :span="24">
        <el-steps :active="activeStep" finish-status="success" class="custom-steps" simple>
          <el-step title="知识图谱生成" description="AI分析文本并构建知识体系">
            <template #icon>
              <el-icon><Upload /></el-icon>
            </template>
          </el-step>
          <!-- <el-step title="建立知识图谱数据库" description="AI分析文本并构建知识体系">
            <template #icon>
              <el-icon><Document /></el-icon>
            </template>
          </el-step> -->
          <el-step title="生成试题" description="基于知识图谱智能生成试题">
            <template #icon>
              <el-icon><MagicStick /></el-icon>
            </template>
          </el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <Step1></Step1>
      </el-col>
    </el-row>
  </div>

</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { MagicStick, Upload, Document  } from '@element-plus/icons-vue'
import Step1 from '../components/home/Step1.vue'
import Step2 from '../components/home/Step2.vue'
import Step3 from '../components/home/Step3.vue'
import { useActiveStepIndex } from '../stores/counter'
import Chart from '../components/chart.vue'
const useStepIndex = useActiveStepIndex()

const activeStep = computed(() => useStepIndex.activeStepIndex)

const currentStepComponent = computed(() => {
  switch (activeStep.value) {
    case 0:
      return Step1
    case 1:
      return Step2
    case 2:
      return Step3
    default:
      return Step1
  }
})


</script>

<style scoped>
.home-container {
  padding: 24px;
  height: 100%;
  background: #f5f7fa;
  
}

.title-section {
  margin-bottom: 32px;
  text-align: center;
  padding: 24px 0;
  background: linear-gradient(135deg, #409EFF 0%, #36cfc9 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-icon {
  font-size: 32px;
  margin-right: 12px;
  color: #ffffff;
  animation:shake 0.5s infinite;

}

@keyframes sparkle {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.steps-row {
  margin-bottom: 32px;
}

.custom-steps {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.step-content {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  min-height: 400px;
}

</style>